/*
*swiper  自动分组 / Carousel 模式(06)
 */
import React from 'react'
import { Carousel} from 'antd-mobile';
import './Swiper_3.css'
import {group_arr} from '../../util/util'


class Swiper_3 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: ['', '', ''],
            data1: ['', '', ''],
            banner:require('./banner.png'),
            swipeSpeed:this.props.swipeSpeed?this.props.swipeSpeed:10,
            speed:this.props.speed?this.props.speed:500,
            swiper_3_data:[],
            product_href:'productinfo.php?product_id='
        };
    }
    componentDidMount(){
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
                data1: ['A1iyWuByWk1313lrrUDlFignR', 'Tek56465JlZ1RVCjLFexlOCuWn', 'IJOt13511IlfsYdTyaDTRVrLI']
            });
        }, 100);
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.swiper_3_data){
            var swiper_3_data=group_arr(nextProps.swiper_3_data,3)
            this.setState({
                swiper_3_data: swiper_3_data,
            });

        }
    }
    go_to_product_info(product_id){
        window.location.href=this.state.product_href+product_id
    }
    render() {
        return (
            <div>
                <Carousel
                    className="my-carousel"
                    autoplay={false}
                    infinite
                    selectedIndex={1}
                    dots={false}
                    swipeSpeed={this.state.swipeSpeed}
                    speed={this.state.speed}
                >
                    {this.state.swiper_3_data.map(item => (
                        <div key={item} className="Swiper_3_content">
                            {item.map(v => (
                                <div key={v.product_id}  className="Swiper_3_smallItem"
                                      onClick={ ()=>{this.go_to_product_info(v.product_id) } }
                                >
                                    <img
                                        src={v.image}
                                        alt=""
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({
                                                initialHeight: null,
                                            });
                                        }}
                                    />
                                    <p className="txt_over_hidden" style={{fontSize:'12px',overflow:'hidden',color:'black'}}>{v.product_name}</p>
                                    <div>
                                        <p className="priceYes"><span>￥</span>{v.sku[0].price}</p>
                                        <p className="priceNo"><span>￥</span>{v.sku[0].market_price}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    ))}
                </Carousel>
            </div>
        );
    }
}


export default Swiper_3

